<template>
  <div id="dengji"></div>
</template>
<script setup lang="ts">
import { onMounted } from '@vue/runtime-core'
import * as Echarts from 'echarts'
import moment from 'moment'
import { fontSize } from '@/utils/tools'
const chartId = `${moment().valueOf()}`
const data = [
  {value: 308, name: '一级',},
  {value: 108, name: '二级'},
]
const option = {
    color: ['#FF739D', '#575BFF'],
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
    },
    legend: {
      orient: 'vertical',
      left: '0',
      top: fontSize(20),
      bottom: fontSize(20),
      itemWidth: fontSize(30),
      itemHeight: fontSize(15),
      padding: fontSize(0),
      itemGap: fontSize(5),
      formatter: function (name: any) {
        let total = 0
        let target = 0
        for (let i = 0, l = data.length; i < l; i++) {
          total += data[i].value;
          if (data[i].name === name) {
            target = data[i].value;
          }
        }
        return `${name}: ${((target / total)*100).toFixed(2)}%`
      }
    },
    series: [
      {
        name: '人员占比',
        type: 'pie',
        radius: ['60%', '90%'],
        left: '50%',
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: fontSize(14),
            fontWeight: 'bold'
          }
        },
        labelLine: {
            show: false
        },
        data
      }
    ]
}
onMounted(() => {
  let myChart = Echarts.init(document.getElementById('dengji'))
  myChart.setOption(option)
})
</script>
<style lang="less" scoped>
  .box {
  color: #60d659;
  }
</style>
